<template>
  <div class="feedback">
    <!-- <h3 class="title"><span class="back" @click="back"></span>预警反馈</h3> -->
    <div class="mou_gary">
      <div class="feedInner">
        <p class="feedback-tit">反馈内容</p>
        <ul class="warn_type">
          <li
            :class="[problemType == 1 ? 'on' : '']"
            @click="radioBtnChanged(1)"
          >
            燃气泄漏
          </li>
          <li v-show="alarmType!=3"
            :class="[problemType == 2 ? 'on' : '']"
            @click="radioBtnChanged(2)"
          >
            沼气
          </li>
          <li v-show="alarmType==3||alarmType==0"
            :class="[problemType == 3 ? 'on' : '']"
            @click="radioBtnChanged(3)"
          >
            误报
          </li>
          <li
            :class="[problemType == 4 ? 'on' : '']"
            @click="radioBtnChanged(4)"
          >
            设备异常
          </li>
        </ul>
        <p class="feedback-tit">反馈人信息</p>
        <ul class="feedInfor">
          <li>
            <span>反馈人员</span>
            <b>{{userName}}</b>
          </li>
          <!-- <li>
            <span>反馈人员</span>
            <b>张武</b>
          </li> -->
        </ul>
      </div>
    </div>
    <span class="commit" @click="commitData">提交</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      problemType: 1,
      userName:"",
      alarmType:0,
    };
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    reqFeedback() {
      console.log(
        "alarmid= " +
          this.$route.query.alarmId +
          "userid = " +
          this.$route.query.userId
      );
      var param = {
        alarmid: this.$route.query.alarmId, //报警编号  必填
        feedback: this.problemType + "", //反馈内容  1:燃气泄露,2:沼气,3:误报 .4.设备异常 必填
        feedbackpers: this.$store.state.userInfo.id //反馈人员Id --当前登陆人Id 必填
      };
      this.$api.reqApi.feedback(param).then(res => {
        if (res.code === "200") {
          console.log("反馈成功！");
          this.$toast("反馈成功！")
          this.back()
        }
      });
    },
    radioBtnChanged(type) {
      this.problemType = type;
    },
    commitData() {
      this.reqFeedback();
    }
  },
  mounted() {
    let _this = this;
    _this.userName = _this.$store.state.userInfo.loginName
    _this.alarmType=this.$route.query.alarmType
    window["dsBridge"].register("GoBack", function() {
      _this.$router.go(-1);
    });
    window["dsBridge"].register("whetherHtml", function(ret) {
      console.log("=======ret:" + ret);
      return true;
    });
  }
};
</script>

<style scope lang="stylus">
.feedInner {
  background: #ffffff;
  padding: 0 0.3rem;
}

.feedback-tit {
  color: #979ea0;
  font-size: 0.24rem;
  line-height: 0.77rem;
}

.warn_type {
  display: flex;
  flex-direction: row;
  margin-bottom: 0.2rem;

  li {
    flex: 1;
    height: 0.6rem;
    line-height: 0.6rem;
    background: #f1f1f1;
    text-align: center;
    border-radius: 0.08rem;
    margin-right: 0.24rem;

    &.on {
      background: #428ee4;
      color: #fff;
      box-shadow: 1px 2px 6px 1px rgba(66, 142, 228, 0.4);
    }
  }
}

.feedInfor {
  li {
    height: 1.44rem;
    line-height: 1.44rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: #dde0e4 1px solid;

    &:last-child {
      border: 0;
    }

    b {
      color: #666666;
      font-weight: normal;
    }
  }
}
</style>

